<template>
    <div id="map" class="mapC"></div>
</template>

<script>
import 'ol/ol.css'
import GeoJSON from 'ol/format/GeoJSON'
import Map from 'ol/Map'
import OSM from 'ol/source/OSM'
import VectorSource from 'ol/source/Vector'
import View from 'ol/View'
import {
  Select,
  Translate,
  defaults as defaultInteractions
} from 'ol/interaction'
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'
export default {
  name: 'index',
  data () {
    return {}
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      const raster = new TileLayer({
        source: new OSM()
      })

      const vector = new VectorLayer({
        source: new VectorSource({
          url: 'zlocal/data/geojson/countries.geojson',
          format: new GeoJSON()
        })
      })

      const select = new Select()

      const translate = new Translate({
        features: select.getFeatures()
      })
      // eslint-disable-next-line
      const map = new Map({
        interactions: defaultInteractions().extend([select, translate]),
        layers: [raster, vector],
        target: 'map',
        view: new View({
          center: [0, 0],
          zoom: 2
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
